<template>
  <div class="getPsd flex-center" >
    <div class="container flex-center">
      <div id="getPsd" class="content">
        <div id="title flex-align">
             <h1>找回密码</h1>
         <div class="form-box">
          <el-form :model="getPsdForm">
          <el-form-item>
            <el-col :span="3">
             <img src="../../assets/imgs/phone.png">
            </el-col>
            <el-col :span="21">
             <el-input v-model="getPsdForm.phonenumber" placeholder="请输入你的手机号码"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-col :span="14" offset="3">
             <el-input v-model="getPsdForm.yourphonenumber" placeholder="请输入手机号码"></el-input>
            </el-col>
            <el-col :span="6">
              <el-button id="get-button" @click="open">发送验证码</el-button>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-col :span="3">
              <img src="../../assets/imgs/block2.png">
            </el-col>
            <el-col :span="21">
              <el-input v-model="getPsdForm.passward" placeholder="请输入密码"></el-input>
            </el-col>
            </el-form-item>
            <el-form-item>
              <el-col :span="21" offset="3">
               <el-input v-model="getPsdForm.repassward" placeholder="请确认你的密码"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-col :span="21" :offset="3">
                <el-button id="true-button" @click="trueSubmit" style="width:100%;">确定</el-button></el-col>
            </el-form-item>
            
              <el-link id="re-register" :underline="false">已有账号，去登录</el-link>
          
          </el-form>
        </div>
        </div>
      </div>
     
    </div>
  </div>


</template>

<script>
export default {
  name: 'getPsdView',
  data() {
    return {
      loginShow: false,
      getPsdVisbale: true,
      registVisbale: false,
      getPsdForm: {
          phonenumber: '123456',
          yourphonenumber:'123456',
          passward: '',
          repassward:'',
        },
    } 
  },
    
    //发送验证码按钮
    methods: {
      open() {
        this.$alert('验证码已发出，请注意查看',  {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });
      },
      
  },
  //open() {
      //if (this.getPsdForm(phonenumber == true&&yourphonenumber == true) = true) {
     // this.$router.push("/Popup");}
     // else{
      //  {
      //  alert()
     // }
      }
   // }
//}
</script>

<style>
.getPsd{
  width:100%;
  /*width: 1680px;*/
  height:100%;
 /* height: 1080px;*/
  min-height: fit-content;/*min-height：20px 最小高度，如果高度比这个数值小，这个块元素不会在变小，如果比这个数值大，
  那么会无限变大。*/
  background: url('@/assets/imgs/background.jpg') no-repeat center; /*不平铺，只显示一张背景图*/ 
  background-size: cover;
}
.container{
    max-width: 1059px;
    width: 63%;
    max-height: 674px;
    height: 80%;
    min-height: fit-content;
    background-color: #fff;
    border: solid 1px #666666;
}
.content{
  margin-top: 130px;
  width: 405px;
  height: 510px;
/*background-color: aqua;*/
}
.title {
  
  color: black;
  font-size: 4px;
  }
h1 {
    margin-bottom: 50px;
    font-size: 24px;
    font-weight: 400;
    text-align: center;
 }
 .el-form-item {
  height: 40px;
  /*margin-bottom: 36px !important;*/
  margin-bottom: 4% !important;
 }
#true-button{
  background-color: #00CCCC;
  color: #fff;
}
#get-button {
  width: 100%;
  margin-left: 18px;
  padding:12px;
  background-color: #00CCCC;
  color: #fff;
}
#re-register{
  color: #00CCCC;
  margin-left:165px;
  margin-bottom: 50px;

}

</style>